<template>
	<pageViewContainer>
		<el-row :gutter="6" style="height: 100%; width: 100%;">
			<!-- 左侧任务列表 -->
			<el-col :span="16" class="responsive-col" style="height: 100%;">
				<el-card shadow="never" style="height: 100%; border-radius: 8px;">
					<template #header>
						<div class="card-header">
							<span>定时任务管理</span>
							<div class="header-actions">
								<el-button-group size="small">
									<el-button @click="createTask" type="primary">
										<el-icon>
											<Plus />
										</el-icon>
										新增任务
									</el-button>
									<el-button @click="refreshData" :loading="refreshLoading">
										<el-icon>
											<Refresh />
										</el-icon>
										刷新
									</el-button>
								</el-button-group>
							</div>
						</div>
					</template>
					<taskListTem ref="taskListRef" :key="listKey" @showLogs="showTaskLogs" @editTask="editTask"
						@taskExecuted="handleTaskExecuted" style="height: 100%;" />
				</el-card>
			</el-col>

			<!-- 右侧执行日志 -->
			<el-col :span="8" class="responsive-col" style="height: 100%;">
				<el-card shadow="never" style="height: 100%; border-radius: 8px;">
					<template #header>
						<div class="card-header">
							<span>
								<el-icon style="margin-right: 8px;">
									<Document />
								</el-icon>
								执行日志
							</span>
							<div class="header-actions">
								<el-button-group size="small">
									<el-button @click="refreshExecutionLogs" :loading="refreshLoading">
										<el-icon>
											<Refresh />
										</el-icon>
										刷新
									</el-button>
								</el-button-group>
							</div>
						</div>
					</template>
					<LogList ref="executionLogsRef" :table-height="'100%'" :show-actions="true" />
				</el-card>
			</el-col>
		</el-row>

		<!-- 任务编辑对话框 -->
		<taskEditTem ref="taskEditRef" @taskUpdated="refreshData"></taskEditTem>

		<!-- 任务日志抽屉 -->
		<el-drawer v-model="taskLogsVisible" title="任务日志" :size="1000" direction="rtl" :close-on-click-modal="true"
			destroy-on-close class="task-logs-drawer">
			<div class="logs-content">
				<LogList ref="taskLogsRef" :task-id="currentTaskId" :table-height="'calc(100vh - 180px)'"
					:show-actions="true" :show-pagination="true" :show-memory="true" :show-message="false"
					size="default" />
			</div>

			<template #footer>
				<div class="drawer-footer">
					<el-button size="default" icon="Refresh" @click="refreshTaskLogs" :loading="taskLogsLoading">
						刷新
					</el-button>
					<el-button type="primary" @click="closeTaskLogs">关闭</el-button>
				</div>
			</template>
		</el-drawer>
	</pageViewContainer>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Document } from '@element-plus/icons-vue'
import { markRaw } from 'vue'
import taskListTem from './components/taskList.vue'
import taskEditTem from './components/taskEdit.vue'
import LogList from './components/logList.vue'

export default {
	name: 'TimerTaskManage',
	components: {
		taskListTem,
		taskEditTem,
		LogList,
		Plus: markRaw(Plus),
		Refresh: markRaw(Refresh),
		Document: markRaw(Document),
	},
	data() {
		return {
			refreshLoading: false,
			listKey: 0,
			taskLogsVisible: false,
			currentTaskId: null,
			taskLogsLoading: false,
		}
	},
	created() {
		this.refreshData()
	},
	methods: {
		// 创建新任务
		createTask() {
			this.$refs.taskEditRef.open()
		},

		// 编辑任务
		editTask(task) {
			this.$refs.taskEditRef.open(task)
		},

		// 刷新数据
		async refreshData() {
			this.refreshLoading = true
			try {
				// 刷新任务列表
				if (this.$refs.taskListRef) {
					await this.$refs.taskListRef.loadData()
				}
				// 刷新执行日志
				if (this.$refs.executionLogsRef) {
					await this.$refs.executionLogsRef.loadLogs()
				}
				this.listKey++
			} catch (error) {
				ElMessage.error('数据刷新失败: ' + error.message)
			} finally {
				this.refreshLoading = false
			}
		},

		// 刷新执行日志
		async refreshExecutionLogs() {
			this.refreshLoading = true
			try {
				if (this.$refs.executionLogsRef) {
					await this.$refs.executionLogsRef.loadLogs()
				}
			} catch (error) {
				ElMessage.error('执行日志刷新失败: ' + error.message)
			} finally {
				this.refreshLoading = false
			}
		},

		// 显示任务日志
		showTaskLogs(taskId) {
			this.currentTaskId = taskId
			this.taskLogsVisible = true
		},

		// 刷新任务日志
		async refreshTaskLogs() {
			this.taskLogsLoading = true
			try {
				if (this.$refs.taskLogsRef) {
					await this.$refs.taskLogsRef.loadLogs()
				}
			} catch (error) {
				ElMessage.error('任务日志刷新失败: ' + error.message)
			} finally {
				this.taskLogsLoading = false
			}
		},

		// 关闭任务日志对话框
		closeTaskLogs() {
			this.taskLogsVisible = false
			this.currentTaskId = null
		},

		// 处理任务执行事件
		handleTaskExecuted() {
			// 刷新执行日志
			if (this.$refs.executionLogsRef) {
				this.$refs.executionLogsRef.loadLogs()
			}
		}
	}
}
</script>

<style lang="less" scoped>
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.header-actions {
		display: flex;
		align-items: center;
	}
}

:deep(.el-card__header) {
	background-color: #ffffff;
	border-bottom: 1px solid #ebeef5;
}

:deep(.el-card) {
	border-radius: 8px;
}

:deep(.el-drawer__body) {
	padding: 10px;
	
	overflow: hidden !important;
}



.logs-content {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.drawer-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
	.task-logs-drawer :deep(.el-drawer) {
		width: 100% !important;
	}
}
</style>
